<template>
  <div class="right-img-container">
    <div class="image-main" v-infinite-scroll="load">
      <div class="image-wrap" v-for="(item, index) in imgUrl" :key="index">
        <img
          class="image-item"
          @click="handleCurrentNum(index)"
          :src="item.url"
          :key="index"
        />
        <el-checkbox class="check-box" v-model="imgIndex[index]" />
      </div>
      <div v-viewer style="display: none" class="images">
        <img
          class="image-wrap demo-img"
          v-for="(item, index) in imgUrl"
          :key="index"
          :src="item.url"
        />
      </div>
    </div>
    <!-- <div class="page">{{ currentNum }}/{{ imgUrl.length }}</div> -->
  </div>
</template>

<script>
export default {
  name: "rightImg",
  props: ["currentNum", "imgUrl", "handleNum", "loadImgUrl"],
  data() {
    return {
      imgIndex: [],
    };
  },
  methods: {
    // 当前显示的图片编号
    handleCurrentNum(index) {
      this.handleNum(index);
      const imgs = document.querySelectorAll(".demo-img");
      imgs[index].click();
    },
    // 获取当前点击图片
    // getCurrentImgCon() {
    //   const currentImgCon = document.querySelector(".viewer-canvas>img");
    //   if (currentImgCon) {
    //     const src = currentImgCon.src;
    //     const findIndex = this.imgUrl.findIndex((item) => item.url === src);
    //     this.imgUrl.forEach((item, index) => {
    //       item.checked = false;
    //       if (index === findIndex) {
    //         item.checked = true;
    //       }
    //     });
    //     console.log(this.imgUrl);
    //     this.handleNum(findIndex);
    //   }
    // },
    load() {
      this.loadImgUrl();
    },
  },
  watch: {
    imgUrl() {
      this.imgUrl.forEach((item) => this.imgIndex.push(item.checked));
      console.log(this.imgIndex);
    },
    imgIndex: {
      deep: true,
      handler() {
        this.$emit("updateChecked", this.imgIndex);
      }
    }
  },
  mounted() {
    // document.addEventListener('click',this.getCurrentImgCon,false)
  },
  beforeDestroy() {
    // document.removeEventListener('click',this.getCurrentImgCon,false)
  },
};
</script>

<style lang="scss" scoped>
.right-img-container {
  height: calc(100vh - 194px);
  .image-main {
    height: calc(100% - 20px);
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    .image-wrap {
      padding: 0 10px 10px 0;
      width: 16.66%;
      height: 160px;
      position: relative;
      .image-item {
        width: 100%;
        height: 100%;
      }
      .check-box {
        position: absolute;
        right: 10px;
        bottom: 8px;
      }
    }
  }
  .page {
    height: 25px;
    width: 80px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 10px;
}
/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}
/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 7px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #e8e8e8;
}
</style>
